<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>详情页</title>
    <link rel="stylesheet" href="static/css/basic.css">
    <link rel="stylesheet" href="static/fonts/iconfont.css">
    <link rel="stylesheet" href="static/css/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="static/css/layout.css">

</head>
<body>
    <div class="container" :controller="container">
        <div class="content-wrapper white-bg">
            <!--详情页面 start-->
            <div class="product-intro w1200">
                <!--商品信息 start -->
                <div class="goods-wrap clearfix">
                    <!--商品图片幻灯片 start-->
                    <div class="preview-wrap">
                        <!-- Swiper -->
                        <div class="swiper-container gallery-top">
                            <div class="swiper-wrapper">
								<div class="swiper-slide" :attr="{style:'background-image:url('+el+')'}" :for="(index,el) in @galleryThumbs"></div>
                            </div>
                        </div>
                        <div class="swiper-container gallery-thumbs">
                            <div class="swiper-wrapper">
                                <!--<div class="swiper-slide" style="background-image:url(static/upload/78-1.jpg)"></div>-->
								<div class="swiper-slide" :attr="{style:'background-image:url('+el+')'}" :for="(index,el) in @galleryThumbs"></div>
                            </div>
                        </div>
                    </div>
                    <!--商品图片幻灯片 end -->
					 
                    <div class="itemInfo-wrap">
                        <div class="sku-name"><span :text="form.name"></span>  </div>
                        <div class="news" :text="form.wareDes"></div>
                        <div class="summary">
                            <table>
                                <tr>
                                    <td>批发价：<span :text="form.pricePiece">/件</span></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>单<i>价</i>价：   ¥<span :text="form.priceUnit"></span>/包</td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>条<i>价</i>码：   <span :text="form.barcode"></span></td>
                                    <td>箱<i>价</i>规：   <span :text="form.numberPerBox"></td>
                                </tr>
                                <tr>
                                    <td>净含量：   <span :text="form.netContent"></span></td>
                                    <td>箱<i>价</i>量：   <span :text="form.weightPiece"></span></td>
                                </tr>
                            </table>
                        </div>
                        <div class="choose-attrs">
                            <dl class="attrs" :if="form.wareAttrList.length() > 1">
                                <dt>属   性：</dt>
                                <dd   >
                                    <a href="#" class="current" :for="item in form.wareAttrList">{{item.name}}</a>
                                </dd>
                            </dl>
                            <ul class="clearfix">
                                <li>库存：<span :text="form.numberInventory"></span>件 <i class="icon icon-line"></i></li>
                                <li>起批量：<span :text="form.numberWholesale"></span>件 <i class="icon icon-line"></i></li>
                                <li>已销量：件 <i class="icon icon-line"></i></li>
                                <li>发货地：<span :text="form.sendCityName"></span> <i class="icon icon-line"></i></li>
                            </ul>
                        </div><!--/choose-attrs-->
                        <div class="handle-btn">
                            <a href="#" class="add-cart">加入购物车</a>
                            <a href="#" class="collect">该商品已收藏</a>
                        </div>
                        <div class="notes">温馨提示：商品均支持开具发票</div>
                    </div><!--/itemInfo-wrap-->
                </div>
                <!--商品信息 end   -->

                <!--规格参数 start-->
                <div class="params-wrap">
                    <div class="params-title">
                        <span>编号：{{form.id}}</span>
                        <h3>规格参数</h3>
                    </div>
                    <div class="params-body">
                        <table>
                            <tr>
                                <td><span>生产许可证：</span><span :text="form.productionLicense"></span> </td>
                                <td><span>执行标准：</span><span :text="form.performStandard"></span> </td>
                                <td><span>厂名：</span><span :text="form.manufacturer"></span> </td>
                            </tr>
                            <tr>
                                <td><span>保质期：</span><span :text="form.shelfLife"></span>天</td>
                                <td><span>存储方式：</span><span :text="form.methodStorage"></span></td>
                                <td><span>包装方式：</span><span :text="form.methodPacking"></span></td>
                            </tr>
                            <tr>
                                <td><span>生产日期：</span><span :text="form.dateManufacture"></span></td>
                                <td><span>件装尺寸规格：</span><span :text="form.sizePiece"></span></td>
                                <td><span>产地：</span><span :text="form.producingArea"></span></td>
                            </tr>
                        </table>
                    </div>
                </div>
                <!--规格参数 end -->

                <!--商品详情 start-->
                <div class="detail clearfix">
                    <div class="col-left fl">
                        <div class="title">图文详情</div>
						<div :html="form.description"></div>
                    </div>
                    <div class="col-right fr">
                        <div class="supply">
                            <h3 class="title">供应商信息</h3>
                            <p><span class="name">供应商名称：</span><span class="cont">{{supplier.name}}</span></p>
                            <p><span class="name">供应商类别：</span><span class="cont">{{supplier.categoryName}}</span></p>
                            <p><span class="name">主营业务：</span><span class="cont">{{supplier.mainBiz}}</span></p>
                        </div>
                        <div class="company-area">
                            <h3 class="title">专属特权</h3>
                            <ul>
                                <li>
                                    <i class="icon-spare"></i>
                                    <p>专属价格</p>
                                    <p>特殊优惠</p>
                                </li>
                                <li>
                                    <i class="icon-fast"></i>
                                    <p>专属价格</p>
                                    <p>特殊优惠</p>
                                </li>
                                <li>
                                    <i class="icon-safety"></i>
                                    <p>企业金融</p>
                                    <p>专人服务</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--商品详情 end  -->
            </div>
            <!--详情页面 end  -->
        </div><!--/content-wrapper-->

    </div><!--/container-->
	<script src="../../javascript/config.js"></script>
	 
    <script src="static/js/jquery-1.11.3.min.js"></script>
    <script src="common.js"></script>
	
    <script src="static/js/jquery.lazyload.min.js"></script>
    <script src="static/js/swiper-3.4.2.jquery.min.js"></script>
	<script src="../../javascript/api.js"></script>
	<script src="../../javascript/require.js" ></script>
	<script src="detail.js"></script>

	

    <script>
        var galleryTop = new Swiper('.gallery-top', {
            spaceBetween: 10,
            loop:true,
            autoplay:false,
            loopedSlides: 5, //looped slides should be the same
        });
        var galleryThumbs = new Swiper('.gallery-thumbs', {
            spaceBetween: 10,
            slidesPerView: 5,
            touchRatio: 0.2,
            loop:true,
            autoplay:false,
            loopedSlides: 5, //looped slides should be the same
            slideToClickedSlide: true
        });
        galleryTop.params.control = galleryThumbs;
        galleryThumbs.params.control = galleryTop;
    </script>
</body>
</html>